<template>
	<el-dialog v-model="show" destroy-on-close draggable title="新增/编辑" :width="dialogWidth">
		<el-form label-suffix="：" :model="itemInfo" label-width="auto" label-position="right"
			style="background: #fafafa;padding: 15px 10px 6px 10px;border-radius: 5px;">
			<el-form-item label="是否类目组">
				<el-radio-group v-model="itemInfo.is_cate" :disabled="itemInfo.id">
					<el-radio-button :value="1" label="类目分组"></el-radio-button>
					<el-radio-button :value="0" label="参数值"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="名称">
				<el-input v-model="itemInfo.name" placeholder="请输入" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="key">
				<el-input v-model="itemInfo.key" placeholder="key" style="width: 220px;" />
			</el-form-item>
			<div v-if="itemInfo.is_cate">
				<el-form-item label="上级类目">
					<el-cascader placeholder="顶级分类" :props="{ label: 'name', value: 'id', checkStrictly: true }"
						style="width: 220px;" v-model="itemInfo.cate_id_path" :options="_cateList" />
				</el-form-item>
				<el-form-item label="类目图标">
					<iconSelect @onChange="selectIconChange" :defaultValue="itemInfo.icon"></iconSelect>
				</el-form-item>
			</div>
			<div v-if="!itemInfo.is_cate">
				<el-form-item label="value">
					<el-input v-model="itemInfo.value" placeholder="value" style="width: 220px;" />
				</el-form-item>
			</div>
			<el-form-item label="备注说明">
				<el-input v-model="itemInfo.desc" placeholder="desc" style="width: 220px;" />
			</el-form-item>

			<el-form-item label="排序">
				<el-input-number v-model="itemInfo.sort" :precision="0" :min="1" :max="1000" style="width: 115px;" />
				<div class="form_item_desc" style="margin-left: 8px;">*数值越小越靠前</div>
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="show = false">关闭</el-button>
				<el-button icon="Check" type="primary" @click="save" :loading="saveLoading">
					保存
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import {
	ElMessage
} from 'element-plus'
import {
	useDataDictionaryStore
} from '../../../../stores/dataDictionary'
export default {
	data() {
		return {
			_cateList: [],
			itemInfo: {},
			cateInfo: {},
			itemInfoDefault: {
				is_cate: 0,
				sort: 1
			},
			dialogWidth: 500,
			show: false,
			saveLoading: false,
		}
	},
	watch: {
		show(a, b) {
			if (!a) {
				this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
			}
		}
	},
	computed: {
		dataDictionaryStore() {
			return useDataDictionaryStore()
		}
	},
	created() {
		this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
	},
	methods: {
		selectIconChange(v) {
			this.itemInfo.icon = v
		},
		save() {
			this.saveLoading = true
			if (!this.itemInfo.is_cate) {
				this.itemInfo.cate_id = this.cateInfo.id
			}
			this.dataDictionaryStore.edit(this.itemInfo).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
				this.$emit('editSuccess', this.itemInfo)
				this.show = false
			}).catch(err => {
				ElMessage.error("保存失败," + err.message)
			}).finally(() => {
				this.saveLoading = false
			})
		},

	}
}
</script>

<style></style>